import './WJHPassAnalysis.scss'
import dayjs from 'dayjs'
import { useEffect, useRef, useState } from 'react'

import { DatePicker } from 'antd'
import { useRequest, useSize } from 'ahooks'

import { DualAxesStyle, DualAxesA03Template } from './AssetsCharts'
import { Http } from '../../../../Common/Api'

const colorA =
    'l(180) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(180) 0:rgba(11, 125, 252, 1) 1:rgba(11, 125, 252, 0.4)'
const colorB = 'rgba(250, 235, 136, 1)'

export const WJHPassAnalysisA01 = () => {
    const ChartsBox1 = useRef()
    const ChartsBox2 = useRef()
    const size1 = useSize(ChartsBox1)
    const size2 = useSize(ChartsBox2)

    const [DataA01A, setDataA01A] = useState([])
    const [DataA01B, setDataA01B] = useState([])
    const [DataA02A, setDataA02A] = useState([])
    const [DataA02B, setDataA02B] = useState([])

    // getWJHcompactorDay

    const { runAsync: getDate } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
        },
    })

    const [Time, setTime] = useState(dayjs())
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let numberList = []
            let passList = []
            res.data.forEach(({ isLeft, laneValue, effectiveTotal, pileString, laneNum, passValue }) => {
                numberList = [
                    ...numberList,
                    { isLeft: isLeft, name: '统计数', type: `${pileString}\n第${laneNum}车道`, value: laneValue },
                    { isLeft: isLeft, name: '合格数', type: `${pileString}\n第${laneNum}车道`, value: effectiveTotal },
                ]
                passList = [...passList, { type: `${pileString}\n第${laneNum}车道`, 合格率: passValue }]
            })

            const numberArr = numberList.reduce(
                (result, current) => {
                    if (current.isLeft === -1) {
                        result.left.push(current)
                    } else {
                        result.right.push(current)
                    }
                    return result
                },
                { left: [], right: [] },
            )

            const passArr = passList.reduce(
                (result, current) => {
                    if (current.isLeft === -1) {
                        result.left.push(current)
                    } else {
                        result.right.push(current)
                    }
                    return result
                },
                { left: [], right: [] },
            )
            setDataA01A(numberArr.left)
            setDataA01B(passArr.left)
            setDataA02A(numberArr.right)
            setDataA02B(passArr.right)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getWJHcompactorAnalyse', data: { date: dayjs(Time).format('YYYY-MM-DD') } })
    }, [runAsync, Time])

    return (
        <div className="WJHPassAnalysisA01">
            <DatePicker value={Time} onChange={setTime} />
            <div ref={ChartsBox1}>
                {size1 && (
                    <DualAxesA03Template
                        size={size1}
                        A01={DataA01A}
                        A02={DataA01B}
                        style={{
                            ...DualAxesStyle,
                            BarStatus: true,
                            BarWidth: 240,
                            value: 'value',
                            count: '合格率',
                            YTitleValue: '遍数',
                            colorA,
                            colorB,
                        }}
                    />
                )}
            </div>
            <div ref={ChartsBox2}>
                {size2 && (
                    <DualAxesA03Template
                        size={size2}
                        A01={DataA02A}
                        A02={DataA02B}
                        style={{
                            ...DualAxesStyle,
                            BarStatus: true,
                            BarWidth: 240,
                            value: 'value',
                            count: '合格率',
                            YTitleValue: '遍数',
                            colorA,
                            colorB,
                        }}
                    />
                )}
            </div>
        </div>
    )
}
